<template>
  <el-dialog
    :title="!roleId ? '添加权限组' : '编辑权限组'"
    :visible="addPermissionDialogShow"
    @close="closeClick"
  >
    <el-form ref="formPermission" :model="formData" :rules="rules">
      <el-form-item label="用户名" label-width="120px" prop="username">
        <el-input v-model="formData.username" style="width: 50%" />
      </el-form-item>
      <el-form-item label="权限分配" label-width="120px">
        <el-tree
          ref="tree"
          :data="formData.permission"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          style="width: 50%"
          :default-expanded-keys="[3, 0]"
        />
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="center" align="center">
      <el-button @click="closeClick">取消</el-button>
      <el-button type="primary" @click="addOk">确定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { addPermissionAPI, editPermissionAPI, getMenusAPI } from '@/api/index'
export default {
  name: 'DialogPermission',
  props: {
    addPermissionDialogShow: Boolean,
    roleId: {
			type: Number,
			default: 0
		},
    role: {
			type: Object,
			default: () => {}
		}
  },
  data() {
    return {
      defaultProps: {
        children: 'points',
        label: 'title'
      },
      formData: {
        username: '',
				permission: [1101, 1102, 1103]
      },
			// 验证
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      result: []
    };
  },
	watch: {
		role(newVal) {
			this.formData.username = newVal.title
			// this.formData = newVal
		}
	},
	created() {
		this.getMenusList()
	},
	methods: {
		// 获取菜单的列表信息
		async	getMenusList() {
			const res = await getMenusAPI()
			// 树形结构
			res.map((item) => {
        if (item.childs) {
					item.points = item.childs
					delete item.childs
        }
      })
			this.formData.permission = res
		},
		// 点击确定按钮，通过判断id,判断是新增，还是编辑(效果成功，返回500)
		addOk() {
			this.$refs.formPermission.validate(async isOk => {
				if (isOk) {
					if (this.roleId) {
						// 编辑
						const res =	await editPermissionAPI(this.roleId, {
							title: this.formData.username,
							permissions: this.formData.permission,
							id: this.roleId
						})
					} else {
						// 新增
						await addPermissionAPI({
							title: this.formData.username,
							permissions: this.formData.permission,
							id: this.roleId
						})
					}
					this.$message.success('添加成功!')
					this.formData.username = ''
					this.$emit('update:addPermissionDialogShow', false)
				}
			})
		},
		// 点击取消按钮，关闭弹出层
		closeClick() {
			this.formData.username = ''
			this.$emit('update:addPermissionDialogShow', false)
		}

	}
}
</script>

<style scoped>
.el-tree {
  padding-top: 8px;
}
::v-deep .el-dialog{
	border-radius: 15px;
}
::v-deep .el-dialog__header{
	background-color:#409eff;
	border-radius: 15px 15px 0 0;

}
::v-deep .el-dialog__title{
	color:#fff;
}
::v-deep .el-dialog__close{
	color:#fff
}
</style>